<template>
	<section class="page-header-wrapper-grid-content-main">
		<a-row :gutter="24">
			<a-col :md="24" :lg="7">
				<a-card :bordered="false">
					<section v-if="info">
						<div class="account-center-avatarHolder">
							<p class="left-header-con">
							<section class="enabled-con" v-if="$permissionJudge('SetChannelStatus')">
								<a-switch checked-children="开" un-checked-children="关" :checked="info.isEnabled" />
								<span class="enabled-mack" @click="setEnabled()"></span>
							</section>
							<a v-if="$permissionJudge('ChannelEdit')" href="javascript:"
								@click="$refs.createOrEdit.createOrEditData(info)">编辑</a>
							</p>
							<div class="avatar">
								<img :src="info.commercialImage||'/avatar.png'">
							</div>
							<div class="username">{{ info.name }}</div>
							<a-tooltip :title="info.fullName">
								<div class="bio overflow" style="max-width: 100%;text-align: center;">
									{{ info.fullName }}
								</div>
							</a-tooltip>
						</div>
						<div class="account-center-detail">
							<p>
								<a-icon class="mr-5" type="user" />
								{{ info.contactName }}
							</p>
							<p>
								<a-icon class="mr-5" type="phone" />
								<span style="vertical-align: middle">{{ info.contactPhone }}</span>
								<template v-if="info.contactEmail">
									<a-divider style="top:0" type="vertical" />
								</template>
								<a-tooltip :title="info.contactEmail">
									<span class="overflow"
										style="display: inline-block;width: 50%;vertical-align: middle;">{{ info.contactEmail }}</span>
								</a-tooltip>

							</p>
						</div>
						<a-divider dashed />
						<div class="account-center-info">
							<div class="infoTitle">账户情况</div>
							<a-row :gutter="[24,0]">
								<a-col :span="11" style="padding-left: 0">
									<p class="mb-0 balance-title">余额(元)</p>
									<p class="mb-0 balance-value">{{ $utils.numberConversion(info.balanceAmount) }}</p>
								</a-col>
								<a-col :span="1" style="padding: 0">
									<a-divider style="height:60px;" type="vertical" />
								</a-col>
								<a-col :span="11" style="padding-right: 0">
									<p class="mb-0 balance-title">其中冻结(元)</p>
									<p class="mb-0 balance-value">
										{{ $utils.numberConversion(info.frozenBalanceAmount) }}
									</p>
								</a-col>
							</a-row>
							<a-row class="mt-24" :gutter="[24,0]">
								<a-col :span="11" style="padding-left: 0">
									<p class="mb-0 balance-title">授信余额(元)</p>
									<p class="mb-0 balance-value">{{ $utils.numberConversion(info.creditAmount) }}</p>
								</a-col>
								<a-col :span="1" style="padding: 0">
									<a-divider style="height:60px;" type="vertical" />
								</a-col>
								<a-col :span="11" style="padding-right: 0">
									<p class="mb-0 balance-title">其中冻结(元)</p>
									<p class="mb-0 balance-value">{{ $utils.numberConversion(info.frozenCreditAmount) }}
									</p>
								</a-col>
							</a-row>
							<a-row class="mt-24" :gutter="[24,0]">
								<a-col :span="11" style="padding-left: 0">
									<p class="mb-0 balance-title">全部余额(元)</p>
									<p class="mb-0 balance-value">{{ $utils.numberConversion(info.amount) }}</p>
								</a-col>
								<a-col :span="1" style="padding: 0">
									<a-divider style="height:60px;" type="vertical" />
								</a-col>
								<a-col :span="11" style="padding-right: 0">
									<p class="mb-0 balance-title">冻结(元)</p>
									<p class="mb-0 balance-value">{{ $utils.numberConversion(info.frozenAmount) }}</p>
								</a-col>
							</a-row>
						</div>
					</section>
				</a-card>
			</a-col>
			<a-col :md="24" :lg="17">
				<!--    <a-card
          style="width:100%"
          :bordered="false"
          :title="'流水列表'"
          :activeTabKey="noTitleKey"
          @tabChange="key => handleTabChange(key, 'noTitleKey')"
        >
          <template slot="extra">
            <a-button v-if="$permissionJudge('ChannelBillAdd')" style="float: right" type="primary" icon="plus"
                      @click="$refs.WaterLists.createWater()">新建
            </a-button>
          </template>
          <WaterLists ref="WaterLists" v-if="noTitleKey==='waterList'" :id="id" @upload="cannelDetails()"></WaterLists>
        </a-card> -->
				<div>
					<a-tabs style="background: #fff; padding: 8px 16px;" :animated="false" v-model="tabs">

						<a-tab-pane key="flowingList" tab="流水列表">
						</a-tab-pane>
						<a-tab-pane key="Subchannel" tab="子渠道">
						</a-tab-pane>
						<div v-show="tabs=='flowingList'">
							<div>
								<a-button v-if="$permissionJudge('ChannelBillAdd')" style="float: right" type="primary"
									icon="plus" @click="$refs.WaterLists.createWater()">新建
								</a-button>
							</div>
							<WaterLists ref="WaterLists" v-if="noTitleKey==='waterList'" :id="id"
								@upload="cannelDetails()">
							</WaterLists>
						</div>
						<div v-show="tabs=='Subchannel'">
							<div>
								<a-button v-if="$permissionJudge('ChannelBillAdd')" style="float: right" type="primary"
									icon="plus" @click="$refs.subchannel.createWater()">新建
								</a-button>
							</div>
							<subchannel ref="subchannel" :id="id" @upload="cannelDetails()">
							</subchannel>
						</div>
					</a-tabs>
				</div>

			</a-col>
		</a-row>
		<CreateOrEdit ref="createOrEdit" :id="id" @upload="cannelDetails"></CreateOrEdit>
		<a-modal :maskClosable="false" title="屏蔽服务商" :width="650" :visible="showModal" :confirm-loading="confirmLoading"
			:ok-type="'primary'" @ok="confirmOk" @cancel="cancel">
			<a-form :form="form">
				<a-row :gutter="[24,0]">
					<a-col :span="24">
						<a-form-item class="mb-15" label="屏蔽服务商" :label-col="labelCol" :wrapper-col="wrapperCol">
							<a-select mode="multiple" placeholder="请选择屏蔽服务商" v-decorator="[
							'shieldVendorIds'
						]">
								<a-select-option v-for="item in allVendors" :key="item.id">
									{{ item.name }}
								</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
				</a-row>
			</a-form>
		</a-modal>
		<section class="detail-footer">
			<a-button type="primary" @click="$router.back()">返回</a-button>
		</section>
	</section>
</template>
<script>
	import {
		tableMixins
	} from '@/utils/mixins'
	import {
		getCannelDetails,
		setChannelStatus,
		setShieldVendor
	} from '@/api/operationInfo/channel'
	import {
		cloneDeep
	} from 'lodash'
	import WaterLists from './page/WaterList'
	import subchannel from './page/subchannel'
	import CreateOrEdit from './CreateOrEdit'

	export default {
		name: 'ChannelManagementDetails',
		mixins: [tableMixins],
		components: {
			WaterLists,
			CreateOrEdit,
			subchannel
		},
		data() {
			return {
				tabListNoTitle: [{
					key: 'waterList',
					tab: '流水列表',
				}],
				noTitleKey: 'waterList',
				tabs: 'flowingList',
				id: undefined,
				info: undefined,
				form: this.$form.createForm(this),
				showModal: false,
				confirmLoading: false,
				labelCol: {
					span: 4
				},
				wrapperCol: {
					span: 19
				}
			}
		},
		async created() {
			this.id = this.$route.params.id
			await this.cannelDetails()
		},
		methods: {
			cloneDeep,
			//设置服务商显示
			setShowVendors() {
				let {
					shieldVendorIds
				} = this.info
				this.allVendors = shieldVendorIds ? cloneDeep(this.allVendors).map(item => ({
					...item,
					isShielding: !(shieldVendorIds.findIndex(l => l === item.id) < 0)
				})) : this.allVendors.map(item => ({
					...item,
					isShielding: false
				}))
			},
			cancel() {
				this.confirmLoading = false
				this.form.resetFields()
				this.showModal = false
			},
			confirmOk() {
				this.form.validateFields((err, values) => {
					if (!err) {
						setShieldVendor({
							id: this.id,
							shieldVendorIds: values.shieldVendorIds || []
						}).then(() => {
							this.$message.success('设置成功！')
							this.cannelDetails(true)
							this.cancel()
						})
					}
				})
			},
			setEnabled() {
				const {
					id,
					name,
					isEnabled
				} = this.info
				this.$confirm({
					title: '请确认是否启用渠道商',
					content: isEnabled ? `请确定要停用【${name}】渠道商吗？` : `请确定要启用【${name}】渠道商吗？`,
					okText: '确定',
					cancelText: '取消',
					onOk: () => {
						setChannelStatus({
							id,
							isEnabled: !isEnabled
						}).then(res => {
							this.$message.success('设置成功！')
							this.cannelDetails()
						})
					}
				})
			},
			async cannelDetails(type) {
				await getCannelDetails({
					id: this.id
				}).then(res => {
					this.info = res
					if (type) this.setShowVendors()
				})
			},
			handleTabChange(key, type) {
				this[type] = key
			}
		}
	}
</script>
<style lang="less" scoped>
	.page-header-wrapper-grid-content-main {
		width: 100%;
		height: 100%;
		min-height: 100%;
		transition: 0.3s;
		margin-bottom: 60px;

		.account-center-avatarHolder {
			text-align: center;
			margin-bottom: 24px;

			.left-header-con {
				display: flex;
				justify-content: space-between;
			}

			&>.avatar {
				margin: 0 auto;
				width: 104px;
				height: 104px;
				margin-bottom: 20px;
				border-radius: 50%;
				overflow: hidden;

				img {
					height: 100%;
					width: 100%;
				}
			}

			.username {
				color: rgba(0, 0, 0, 0.85);
				font-size: 20px;
				line-height: 28px;
				font-weight: 500;
				margin-bottom: 4px;
			}
		}
	}

	.account-center-info {
		.balance-title {
			color: #999;
			text-align: center;
		}

		.balance-value {
			font-size: 22px;
			line-height: 44px;
			text-align: center;
			color: rgba(0, 0, 0, 0.85);
		}
	}

	.infoTitle {
		font-weight: 500;
		color: rgba(0, 0, 0, 0.85);
		margin-bottom: 24px;
	}

	.enabled-con {
		position: relative;

		.enabled-mack {
			position: absolute;
			top: 0;
			left: 0;
			display: inline-block;
			width: 100%;
			height: 100%;
			opacity: 0;
			cursor: pointer;
		}
	}

	/deep/ .ant-divider-horizontal.ant-divider-with-text-left::before,
	/deep/ .ant-divider-horizontal.ant-divider-with-text-left::after {
		top: 6%;
	}

	.detail-footer {
		padding: 10px 16px;
		position: fixed;
		width: 100%;
		height: 52px;
		left: 0;
		bottom: 0;
		z-index: 1;
		display: flex;
		justify-content: flex-end;
		background-color: #ffffff;
		box-shadow: 0 0 10px rgba(0, 0, 0, .2);
	}
</style>